// import Taro, { Component } from '@tarojs/taro'
import { View, Text, Input } from '@tarojs/components'
import { encryMobile } from '@/utils/encryMobile.js'
import './verifyCode.scss'
import { Component, Fragment } from 'react'
import request from '@/utils/request.js'
import Taro from '@tarojs/taro'
// definePageConfig({
//   navigationBarTitleText: '验证码',
//   navigationStyle: ''
// })
export default class VerifyCode extends Component<any, any> {

  onLoad(opsetion) {
    // this.state.mobile=opsetion.mobile
    this.setState({
      mobile: opsetion.mobile
    })
  }
  onReady() {
   this.getMsCode()
  }
  getMsCode(){
    request({ url: 'api/auth/code', data: { mobile: this.state.mobile } }).then((res) => {
      this.setState({
        time: 60
      })
    })
  }


  state = {
    captcha: '',
    focus: true,
    mobile: '',
    time: 60,

  }
  componentDidMount() {
    setInterval(() => {
      if (this.state.time === 0) {
       return
      } else {
        this.setState({
          time: this.state.time - 1
        })
      }
    }, 1000)

  }

  /**
   * 修改验证码的值
   */
  onChangeCaptcha = (e) => {
    let inputValue = e.detail.value.slice(0, 4)
    this.setState({
      captcha: inputValue
    }, () => {
      if (inputValue.length >= 4) {
        request({url:'api/auth/login',method:'POST',data:{ 
          mobile: this.state.mobile,
          code: this.state.captcha,
          deviceType: 1,
          deviceId: "123",
          deviceModel: "iPhone 16",
          osVersion: "iOS 18",
          appVersion: "1.0"}}).then((res) => {
          Taro.setStorageSync('token', res.data.token)
        }).then(() => {
          Taro.switchTab({
            url: '/pages/index/index'
          })
        })
      }
    });
  };
  render() {
    let { captcha, focus } = this.state;
    return (
      <Fragment>
        <View className='sendCaptcha-page'>
          <View className='sendCaptcha-title'>
            输入验证码
          </View>
          <View className='sendCaptcha-content'>
            <Text className='mobile-num'>验证码已发送至 {encryMobile(this.state.mobile)}</Text>

          </View>

          <View className='sendCaptcha-input-container' onClick={() => {
            this.setState({
              focus: true
            });
          }
          }
          >
            <Input className='sendCaptcha-input' type='number' focus={focus} onInput={this.onChangeCaptcha} />
            {
              [0, 1, 2, 3].map((value, index) => {
                return <View className={index === captcha.length ? 'sendCaptcha-input-box sendCaptcha-input-box-at' : 'sendCaptcha-input-box'} key={index}>
                  {
                    captcha[index]
                  }
                </View>
              })
            }
          </View>
        </View>{
          this.state.time === 0 ? <View className='countdown' onClick={() => {
            this.getMsCode();
          }} style={{color:'#ec6138'}}>重新获取验证码</View> : <View className='countdown'>重新获取验证码({this.state.time}s)</View>
        }
     
      </Fragment>
    )


  }
}